<template>
  <div class="addModel">

    <Row :gutter="16">
      <i-form :model="formItem" :label-width="80" class="from" inline>
        <Form-item label="入库方式 ：" class="item">
          <Select v-model="formItem.type" style="width:200px;margin-right:5px">
            <Option value="采购入库">采购入库</Option>
            <Option value="其他入库">其他入库</Option>
          </Select>
        </Form-item>
        <Form-item label="供应商 ：" class="item">
          <Select v-model="formItem.provider" style="width:200px;margin-right:5px">
            <Option v-for="item in companys" :key="item" :value="item">{{item}}</Option>
          </Select>
        </Form-item>
        <Form-item label="备注 ：" class="item">
          <Input v-model="formItem.remark" style="width: 200px"></Input>
        </Form-item>
      </i-form>
    </Row>
    <Row :gutter="16">
      <i-table ref="table" border :content="self" :columns="columns" :data="drugsInfo"></i-table>
    </Row>
    <Row :gutter="16" style="margin-top:10px">
      <Select v-model="drug" filterable placeholder="请选择" @on-change="changeDrug">
        <Option v-for="item in drugs" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
    </Row>

  </div>
</template>

<script>
import hourse from "./../../api/hourse.js";
export default {
  name: "addModel",
  data() {
    return {
      self: this,
      formItem: {
        type: "采购入库",
        provider: "",
        remark: ""
      },
      companys: [],
      drugsInfo: [],
      drugs: [],
      drug: "",
      columns: [
        {
          title: "序号",
          key: "id"
        },
        {
          title: "商品名称",
          key: "name"
        },
        {
          title: "单位",
          key: "unit"
        },
        {
          title: "生产厂商",
          key: "provider"
        },
        {
          title: "数量",
          key: "num",
          render: (h, { row }) => {
            return h("InputNumber", {
              props: { value: row.num },
              on: {
                "on-change": event => {
                  this.drugsInfo.map(index => {
                    if (index.id == row.id) {
                      index.num = event;
                    }
                  });
                }
              }
            });
          }
        },
        {
          title: "零售价(￥)",
          key: "sellPrice"
        },
        {
          title: "成本价(￥)",
          key: "costPrice",
          render: (h, { row }) => {
            return h("InputNumber", {
              props: { value: row.costPrice },
              on: {
                "on-change": event => {
                  this.drugsInfo.map(index => {
                    if (index.id == row.id) {
                      index.costPrice = event;
                    }
                  });
                }
              }
            });
          }
        },
        {
          title: "成本合计(￥)",
          key: "price",
          render: (h, { row }) => h("p", (row.num * row.costPrice).toFixed(2))
        },
        {
          title: "生产日期",
          key: "productTime",
          render: (h, { row }) => h("p", row.productTime.split(" ")[0])
        },
        {
          title: "过期时间",
          key: "overTime",
          render: (h, { row }) => h("p", row.overTime.split(" ")[0])
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (h, { row }) => {
            return h(
              "Button",
              {
                props: { size: "small", type: "error" },
                on: {
                  click: () => {
                    this.drugsInfo = this.drugsInfo.filter(index => {
                      index.id == row.id ? false : true;
                    });
                  }
                }
              },
              [
                h("Icon", {
                  props: { type: "ios-trash" },
                  style: { marginRight: "3px" }
                }),
                h("span", "删除")
              ]
            );
          }
        }
      ]
    };
  },
  methods: {
    submit() {
      hourse.drugAdd({ ...this.formItem, list: this.drugsInfo }).then(data => {
        if (data.flag) {
          this.$emit("changeLoading",false);
          this.drugsInfo = [];
          this.formItem = {
            type: "采购入库",
            provider: "",
            remark: ""
          };
          this.$Message.success('添加成功！')
        }else{
          this.$Message.success('添加失败！')
          this.$emit("changeLoading",true);
        }
      });
    },
    changeDrug(id) {
      hourse.drugSelect({ id }).then(data => {
        this.drugsInfo.push(data.data);
      });
    }
  },
  mounted() {
    hourse.drugCompany({ q: "" }).then(data => {
      this.companys = data.data;
    });
    hourse.drugQuery({ q: "" }).then(data => {
      this.drugs = data.data;
    });
  }
};
</script>

<style lang="less" scoped>
.addModel {
  .from {
    .item {
      margin-right: 15px;
    }
  }
}
</style>
